@charset "utf-8";
.box1 ,.box2,.box3,.box4{
	border-style: solid;
	border-width: 1px;
	background-color: #DCC75A;
	width: 500px;
	height: 500px;
}
.box1 div  ,.box2 div  {
	width: 300px;
	height: 100px;
}
.red {
	background-color: #F4292C;
}
.green {
	background-color: #40CD24;
}
.blue {
	background-color: #1591BD;
}
.yellow {
	background-color: #C4C329;
}



.box1 .item1 {
	background-color: #CB1D20;
}

.box1 .item2 {
	background-color: #1EB538;
}
.box1 .item3 {
	background-color: #229FD3;
}


.box2 .item1 {
	background-color: #B91619;
	width: 300px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
}
.box2 .item2 {
	background-color: #20B536;
	width: 300px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
}
.box2 .item3 {
	background-color: #4AB9DB;
	width: 300px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
}
.box3 div {
	height: 100px;
	width: 33.3%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
}
.box3 .item1 {
	background-color: #D8181C;
}
.box3 .item2 {
	background-color: #26DD91;
}
.box3 .item3 {
	background-color: #3AB4D3;
	height: 100px;
}
.box4 div {
	height: 100px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 20%;
	float: left;
}

.box4 .item1 {
	background-color: #D1181B;
	width: 20%;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 100px;
}
.box4 .item2 {
	background-color: #3CC365;
	width: 20%;
}
.box4 .item3 {
	background-color: #2A99C7;
	width: 20%;
	margin-top: auto;
	margin-left: auto;
	margin-bottom: auto;
	margin-right: auto;
}
.box5 {
	background-color: #C0B630;
	width: 500px;
	height: 500px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.box5 div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;

}
.box5 .item1 {
	width: 200px;
	height: 100px;
	background-color: #AC0407;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 50px;
}
.box5 .item2 {
	width: 200px;
	height: 100px;
	background-color: #1AD73C;
	float: left;
	box-sizing: border-box;

}
.box5 .item3 {
	width: 400px;
	height: 100px;
	background-color: #187EC8;
	margin-left: 50px;
	margin-right: 50px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;


}
.box6 {
	width: 500px;
	height: 500px;
	background-color: #C7D727;
}
.box6 div {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;

}
.box6 .item1 {
	background-color: #EF1115;
	height: 100px;
	width: 400px;
	margin-left: 50px;
	margin-top: 10px;
}
.box6 .item2 {
	background-color: #20E349;
	height: 100px;
	width: 195px;
	margin-top: 10px;
	margin-left: 50px;
	margin-right: 5px;
}
.box6 .item3 {
	background-color: #0F76C0;
	width: 195px;
	height: 100px;
	margin-left: 5px;
	margin-top: 10px;
}
